<script lang="ts" setup>
import apply from '@/api/apply'
import { useApplyStore } from '@/store'

const props = defineProps({
  acctType: {
    type: String,
  },
  inputAlign: {
    type: String,
    default: 'left',
  },
})

const emits = defineEmits(['validated'])
const acct = defineModel('acct', { type: String })
const name = defineModel('name', { type: String })
const { applyId } = storeToRefs(useApplyStore())

async function submit() {
  const { data } = await apply.accountQuery({
    applyId: applyId.value,
    acctType: props.acctType,
    settleAcct: acct.value,
    acctName: name.value,
  })
  if (data.status === 'success') {
    emits('validated', data.data)
  }
}
</script>

<template>
  <nut-form-item label="结算账户" prop="settleAcct" required>
    <nut-input v-model="acct" class="nut-input-text" placeholder="请输入结算账户" type="number" :input-align="props.inputAlign"
      placeholder-style="color:#ccc;" max-length="30" />
  </nut-form-item>
  <nut-form-item label="账户名称" prop="acctName" required>
    <nut-input v-model="name" class="nut-input-text" placeholder="请输入账户名称" type="text" :input-align="props.inputAlign"
      placeholder-style="color:#ccc;" max-length="50">
      <template #right>
        <nut-button type="primary" size="small" @click="submit">校验</nut-button>
      </template>
    </nut-input>
  </nut-form-item>

  <nut-input v-model="iosPhone" type="password" placeholder="" custom-class="displayPwd" />
</template>
